<template>
	<view class="user-fans-box">
		<u-sticky :h5-nav-height="0" :bg-color="'transparent'">
			<view class="header-bg">
				<u-navbar :is-fixed="true" :titleSize="34" :border-bottom="false" :back-icon-color="'#000'" :titleColor="'#000'" title="我的客戶"
					:background="{
					background:'transparent',
					backgroundSize:'100% auto'
				}" title-color="#2F3033">
				</u-navbar>
				<view class="header u-margin-top-24">
					<view class="">
						<view class="row u-padding-top-25 u-padding-bottom-25">
							<view class="u-flex-1 u-text-center">
								<view class="bold u-padding-bottom-5 u-main-color u-font-48">{{nowDayPromotion||0}}</view>
								<view class="u-color-666666 xs">今日推广</view>
							</view>
							<view class="u-flex-1 u-text-center">
								<view class="bold u-padding-bottom-5 u-main-color u-font-48">{{nowDayPromotionSuccess||0}}</view>
								<view class="u-color-666666 xs">今日进件</view>
							</view>
							<view class="u-flex-1 u-text-center">
								<view class="bold u-padding-bottom-5 u-main-color u-font-48">{{sumPromotion||0}}</view>
								<view class="u-color-666666 xs">总推广</view>
							</view>
							<view class="u-flex-1 u-text-center">
								<view class="bold u-padding-bottom-5 u-main-color u-font-48">{{sumPromotionSuccess||0}}</view>
								<view class="u-color-666666 xs">总进件</view>
							</view>
						</view>
					</view>
					<u-search v-model="keyword" shape="round" background="rgba(0, 0, 0, 0.1)" :show-action="true" action-text="确定"
						placeholder="请输入搜索关键词 姓名/产品名称" @search="onSearch" @custom="onSearch" @clear="onSearch" wrapBgColor="transparent" />
					<view style="position: relative;">
						<u-dropdown>
							<u-dropdown-item @change="sortStatusChange('type')" v-model="type" title="类型" :options="typeOptions"></u-dropdown-item>
							<u-dropdown-item @change="sortStatusChange('status')" v-model="status" title="状态" :options="statusOptions"></u-dropdown-item>
						</u-dropdown>
					</view>
				</view>
			</view>
		</u-sticky>
		<view class="content">
			<view class="data-null" v-if="false">
				<view class="muted">暂无相关数据...</view>
			</view>
			<view v-else class="card-box">
				<view v-for="(item, index) in fansObject" :key="index" class="card-item product-basics-info-area">
					<image :src="item.image" mode="scaleToFill" class="logo u-margin-left-15"></image>
					<view class="u-flex-1">
						<view class="  product-basics-info u-padding-bottom-25 ">
							
							<view class="u-flex-1 u-padding-left-15 product-name">
								<view class="xl bold u-line-1">
									{{item.title||''}}
								</view>
								<view class="row u-margin-top-20 u-text-center"
									v-if="item.settlement_interval || item.scope_credit">
									<view class="u-padding-right-20 row" v-if="item.settlement_interval">
										
										<view class="xxs">结算周期</view>
										<view class="lg bold red u-padding-left-10">{{item.settlement_interval||''}}</view>
									</view>
									<view class="row" v-if="item.scope_credit">
										
										<view class="xxs">授信范围</view>
										<view class="lg bold red u-padding-left-10">{{item.scope_credit||''}}</view>
									</view>
								</view>
							</view>
						</view>
						<view class="u-padding-top-20 u-font-sm tips-color">
							<view class="u-flex">
								<view class="u-flex-1">
									<view class="u-padding-top-5">姓名:{{item.name||''}}</view>
								</view>
								<view class="u-flex-2">
									<view class="u-padding-top-5">手机号:{{item.phone||''}}</view>
								</view>
							</view>
							<view class="u-flex">
								<view class="u-flex-1">
									<view class="u-padding-top-5">类型:{{item.type_txt||''}}</view>
								</view>
								<view class="u-flex-2">
									<view class="u-padding-top-5">身份证:{{item.id_code||''}}</view>
								</view>
							</view>
							<view class="u-padding-top-5" v-if="item.status == 3">放款金额:{{item.money||''}}</view>
							<view class="u-flex u-padding-top-15">
								<view class="">
									申请状态:
								</view>
								<view v-if="item.is_open == 0 && item.status == 0" class="xs bold" style="color: #2489FC;">{{item.status_txt||''}}</view>
								<view class="xs bold" v-else-if="item.status == 0" style="color: #ff9900;">{{item.status_txt||''}}</view>
								<view class="xs bold" v-else-if="item.status == 1" style="color: #19be6b;">{{item.status_txt||''}}</view>
								<view class="xs bold" v-else-if="item.status == 2" style="color: #19be6b;">审批中</view>
								<view class="xs bold" v-else-if="item.status == -1" style="color: #fa3534;">申请失败</view>
								<view class="xs bold" v-else-if="item.status == 3" style="color: #19be6b;">申请成功</view>
							</view>
							
						</view>
						<view class="u-padding-top-20 u-font-sm tips-color">
							<u-button size="mini" v-if="item.status == 0" @click="operationStatus(item,1,index)"  :custom-style="customStyle">已进件</u-button>
							<u-button size="mini" v-else-if="item.status == 1" @click="operationStatus(item,2,index)">审批中</u-button>
							<view v-else-if="item.status == 2">
								<u-button size="mini" type="warning" @click="operationStatus(item,-1,index)">申请失败</u-button>
								<u-button size="mini" class="ml20" type="success" @click="applySuccess(item,index)">申请成功</u-button>
							</view>
							
						</view>
					</view>
				</view>
				<u-popup mode="center" border-radius="14" v-model="moneyShowStatus"  width="80%" height="200px" closeable :z-index="199999">
					<view class="bg-white pa">
						<view class="xl bold" style="padding: 15px;">放款金额</view>
						<view class="u-margin-20" style="border-radius: 100rpx;border: 2rpx solid #eee;">
							<u-field
								v-model="money"
								label="放款金额"
								:border-bottom="false"
								placeholder="请填写放款金额"
							>
							</u-field>
						</view>
						<view  class="row-center u-padding-20">
							<u-button size="medium" type="info" @click="moneyShowStatus=false;money=0">取消</u-button>
							<u-button size="medium" class="ml20" type="success" @click="affirm">确定</u-button>
						</view>
					</view>
				</u-popup>
				<loading-footer :status="loadingStatus" slotEmpty>
					<view class="data-null column-center" slot="empty">
						<image class="img-null" src="/static/images/order_null.png"></image>
						<text>暂无相关数据...</text>
					</view>
				</loading-footer>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		loadingType,
		SortType,
		FansType
	} from '@/utils/type';
	import {
		getUserCustomer,
		customerOperation,
		getUserCustomerOverview
	} from '@/api/user';
	import {
		loadingFun
	} from '@/utils/tools'

	export default {
		data() {
			return {
				active: FansType.ALL,
				loadingStatus: loadingType.LOADING,
				sortType: 0,
				keyword: "",
				page: 1,
				fansObject: [],
				nowDayPromotion: 0,
				sumPromotion: 0,
				nowDayPromotionSuccess: 0,
				sumPromotionSuccess: 0,
				type: -1,
				status: -1,
				typeOptions: [{
						label: '全部',
						value: -1,
					},
					{
						label: '个人',
						value: 0,
					},
					{
						label: '企业',
						value: 1,
					}
				],
				statusOptions: [
					{
						label: '全部',
						value: -1,
					},
					{
						label: '未打开',
						value: 0,
					},
					{
						label: '未进件',
						value: 1,
					},
					{
						label: '已进件',
						value: 2,
					},
					{
						label: '审批中',
						value: 3,
					},
					{
						label: '申请成功',
						value: 4,
					},
					{
						label: '申请失败',
						value: 5,
					}
				],
				index:0,
				item:{},
				money:0,
				moneyShowStatus:false,
				customStyle:{
					color:'rgba(59, 131, 252, 1)',
					borderColor:'rgba(59, 131, 252, 1)'
				}
			};
		},


		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			this.getUserFansFun();
			this.getUserCustomerOverviewFun();
		},

		onReachBottom() {
			this.getUserFansFun();
		},

		methods: {
			applySuccess(e,i){
				this.item = e;
				this.index = i;
				this.moneyShowStatus = true
			},
			affirm(){
				customerOperation({
					id:this.item.id,
					status:3,
					money:this.money,
				}).then(res => {
					if(res.code == 1){
						this.fansObject[this.index].status = 3;
						this.fansObject[this.index].money = this.money;
						this.moneyShowStatus = false
					}
				})
			},
			operationStatus(e,s,i){
				customerOperation({
					id:e.id,
					status:s,
				}).then(res => {
					if(res.code == 1){
						this.fansObject[i].status = s;
					}
				})
				
				
				this.$forceUpdate()
			},
			onSearch() {
				this.cleanStatus();
				this.getUserFansFun();
			},

			// 获取粉丝列表
			getUserFansFun() {
				const {
					type,
					status,
					loadingStatus,
					keyword,
					fansObject,
					page,
				} = this;
				const inputData = {
					keyword,
					type,
					status
				};

				loadingFun(getUserCustomer, page, fansObject, loadingStatus, inputData).then(res => {
					if (res) {
						this.page = res.page;
						this.fansObject = res.dataList
						this.loadingStatus = res.status
					}
				})
			},
			async getUserCustomerOverviewFun(){
				let {
					data
				} = await getUserCustomerOverview();
				this.nowDayPromotion = data.nowDayPromotion;
				this.sumPromotion = data.sumPromotion;
				this.nowDayPromotionSuccess = data.nowDayPromotionSuccess;
				this.sumPromotionSuccess = data.sumPromotionSuccess;
				
			},

			// 清理状态
			cleanStatus() {
				this.loadingStatus = loadingType.LOADING;
				this.fansObject = [];
				this.page = 1
			},

			// 排序状态变化 
			sortStatusChange(e) {
				this.cleanStatus();
				this.getUserFansFun();
			}

		}
	};
</script>
<style lang="scss">
	page{
		background: #F2F2F2;
		
		
		.header-bg{
			background-image: url('https://resource.lanbaozixun.com/uploads/images/20240620205458f58af9669.png');
			background-repeat: no-repeat;
			background-size: 100% auto;
		}
	}
	/* pages/user_fans/user_fans.wxss */
	.user-fans-box {
		min-height: 100vh;
		background-size: 100% 400rpx;
		.header {
			top: 56px;
			z-index: 1999;
			position: sticky;
			border-radius: 20rpx 20rpx 0 0;
			box-shadow: 1px 1px 8px #e0e0e0;
			background: linear-gradient(180deg, rgba(229, 243, 254, 1) 0%, rgba(255, 255, 255, 1) 100%) ;
			
			.u-main-color{
				color: #12B8FF;
			}
			


			.top-bar {
				padding: 18rpx 50rpx;
				height: 100rpx;

				.bar-item {
					flex: 1;
					line-height: 34rpx;
					height: 100%;

					&:not(:last-of-type) {
						margin-right: 54rpx;
					}
				}

				.item-active {
					color: white;
					background-color: $-color-primary;
					border-radius: 100rpx;
					height: 100%;
				}
			}

			.sort-bar {
				background-color: white;
				height: 80rpx;

				.sort-bar-item {
					flex: 1;
					line-height: 40rpx;
					height: 100%;

					.item-active {
						color: $-color-primary;
					}
				}
			}
		}
	}

	.content {
		.data-null {
			padding-top: 200rpx;
			line-height: 40rpx;
		}

		.card-box {
			margin-top: 20rpx;

			.card-item {
				padding: 20rpx;
				background-color: white;

				.card-img {
					width: 100rpx;
					height: 100rpx;
					flex: none;
				}

				.fans-info {
					.fans-name {
						line-height: 44rpx;
					}
				}

				.msg {
					line-height: 32rpx;
					text-align: right;
				}

				&:not(:nth-last-of-type(3)) {
					border-bottom: $-solid-border;
				}
			}
		}
	}

	.product-basics-info-area {

		margin: 10px 10px 0;
		padding: 10px 10px 0;
		border-radius: 5px;
		display: flex;
		flex-direction: row;
		
		.logo {
			height: 100rpx;
			width: 100rpx;
		}

		.product-basics-info {
			border-bottom: 2rpx solid #eee;

			

			.red {
				color: red;
			}
		}


	}
</style>